<template>
  <div class="detail-main">
    <div>
      <a-button
        type="text"
        size="small"
        class="mb-[10px]"
        @click="goToolManage"
      >
        <template #icon>
          <ArrowLeftOutlined />
        </template>
      </a-button>
    </div>
    <a-card
      style="width: 100%"
      :tab-list="tabList"
      :active-tab-key="key"
      @tabChange="(key: any) => onTabChange(key, 'key')"
    >
      <template #title>
        <span>
          {{ mcpInfo?.server_name || '' }}
        </span>
        <a-popconfirm
          :title="`确定删除${mcpInfo?.server_name}吗?`"
          ok-text="确定"
          cancel-text="取消"
          @confirm="deleteMcp"
          @cancel="cancel"
        >
          <a-button type="text" size="small" class="mb-[10px]" danger>
            <template #icon>
              <DeleteOutlined />
            </template>
          </a-button>
        </a-popconfirm>
      </template>
      <template #extra>
        <a-switch v-model:checked="checked" />
      </template>
      <div class="detail-card" v-if="mcpInfo">
        <div v-if="key === 'tab1'">
          <generalConfig :mcpInfo="mcpInfo" />
        </div>
        <div v-if="key === 'tab2'">
          <toolsList :mcpInfo="mcpInfo" />
        </div>
        <div v-if="key === 'tab3'">提示</div>
        <div v-if="key === 'tab4'">资源</div>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
  import { ArrowLeftOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { ref, defineAsyncComponent, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { useToolsApi } from '@/api/tools';
  import { McpType } from '@/types/tools';
  import { message } from 'ant-design-vue';
  const toolsApi = useToolsApi();

  const generalConfig = defineAsyncComponent(
    () => import('./components/generalConfig.vue'),
  );
  const toolsList = defineAsyncComponent(
    () => import('./components/toolsList.vue'),
  );
  const router = useRouter();
  const checked = ref<boolean>(false);

  const tabList = [
    {
      key: 'tab1',
      tab: '通用',
    },
    {
      key: 'tab2',
      tab: '工具',
    },
    {
      key: 'tab3',
      tab: '提示',
    },
    {
      key: 'tab4',
      tab: '资源',
    },
  ];

  const key = ref('tab1');
  const noTitleKey = ref('app');

  const onTabChange = (value: string, type: string) => {
    console.log(value, type);
    if (type === 'key') {
      key.value = value;
    } else if (type === 'noTitleKey') {
      noTitleKey.value = value;
    }
  };
  const goToolManage = () => {
    router.push({
      path: '/tools/manage',
    });
  };
  const mcpList = ref<any>([]);

  const mcpInfo = ref<McpType>();
  // 获取列表数据
  const getMcpList = async () => {
    const data = await toolsApi.getToolList({});
    mcpList.value = data;
    const mapId = Number(router.currentRoute.value.query.id);
    mcpInfo.value = mcpList.value.filter(
      (item: McpType) => item.id === mapId,
    )[0];
  };
  //   删除
  const deleteMcp = async () => {
    try {
      const res = await toolsApi.deleteTool({
        server_name: mcpInfo.value?.server_name,
      });
      message.success('删除成功');
      router.push({
        path: '/tools/manage',
      });
    } catch (error) {
      message.error('删除失败');
    }
  };
  const cancel = (e: MouseEvent) => {};
  onMounted(() => {
    getMcpList();
  });
</script>

<style scoped lang="scss">
  .detail-card {
    padding: 10px;
    height: calc(100vh - 300px);
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE和Edge */
    &::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera */
    }
  }
</style>
